<template>
  <view class="list-container">
    <!-- 导航栏 -->
    <uni-nav-bar :title="type" leftIcon="back" color="#000000" backgroundColor="#fff" @clickLeft="back" fixed>
    </uni-nav-bar>
    <u-cell-group>
      <u-cell-item class="item" :arrow="false" v-for="item in list" :key="item.id">
        <image slot="icon" mode="aspectFill" :src="item.pic"></image>
        <view slot="title">
          <view class="title">
            {{ item.name }}
            <view class="hot" v-if="item.isTuijian">
              HOT
            </view>
          </view>
          <!-- <view class="desc">这是一款爱不释手的游戏</view> -->
          <view>
            <text class="rate">4.9</text>
            <u-rate :count="item.point" disabled inactive-icon="star-fill" inactive-color="#FFCC01"></u-rate>
          </view>
        </view>
        <u-button class="btn" slot="right-icon" shape="circle" :ripple="true" size="mini" @click="startGame(item.url)">
          开始游戏</u-button>
      </u-cell-item>
    </u-cell-group>

    <!-- 数据为空提示 -->
    <u-empty margin-top="200" text="暂无列表数据" mode="list" v-if="list.length === 0"></u-empty>
  </view>
</template>

<script>
  import {
    getCateList,
    getHotList
  } from '../../api/index.js'

  export default {
    name: 'List',
    data() {
      return {
        list: [],
        type: ''
      }
    },
    onLoad({
      type
    }) {
      this.type = type
      this.loadList(type)
    },
    methods: {
      async loadList(type) {
        let res = ''
        if (this.type === '热门') {
          res = await getHotList({
            type
          })
        } else {
          res = await getCateList({
            type
          })
        }
        this.list = res.data.list
      },
      startGame(url) {
        location.href = url
      },
      back() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss">
  .list-container {

    .item {
      image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .title {
        display: flex;
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;

        .hot {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 57rpx;
          height: 31rpx;
          background-image: url(/static/hot-bg.png);
          background-size: cover;
          color: #fff;
          font-size: 10rpx;
          margin-left: 10rpx;
          padding: 15rpx;
        }
      }

      .rate {
        font-size: 28rpx;
        color: #7017FF;
        font-weight: 400;
      }

      .u-rate {
        // font-size: 25rpx;
      }

      .desc {
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }

      .btn {
        height: 51rpx;
        background: #8FAFFF;
        // border-radius: 24rpx;
        border: none;
        color: #fff;
        font-size: 22rpx;
        padding: 12rpx 30rpx;
      }

      .u-hairline-border:after {
        border: none;
      }
    }

    .u-empty {
      // margin-top: 40rpx;
    }
  }
</style>
